<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg" >
    <div class="wrapper wrapper-content ">

        <div class="row ">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5><i class="fa fa-user"></i>会员</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${userData1.user_count}"></h1>
                        <div class="stat-percent font-bold text-success">&nbsp;
                            <!--<i class="fa fa-level-up"></i>-->
                        </div>
                        <small>全部会员</small>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5><i class="fa fa-user"></i>当日新增</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${userData2.user_count_day}">80,600</h1>
                        <div class="stat-percent font-bold text-danger">
                        </div>
                        <small>当日新增</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5><i class="fa fa-user"></i>当月新增</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${userData3.user_count_month}">80,600</h1>
                        <div class="stat-percent font-bold text-danger">

                        </div>
                        <small>当月新增</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">最近一个月</span>
                        <h5><i class="fa fa-user"></i>活跃用户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${userData4.user_count_active_month}">80,600</h1>
                        <div class="stat-percent font-bold text-danger">

                        </div>
                        <small>最近一月访问过小程序</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5>总订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${statisticsOrderRight.order_count}">80</h1>
                        <div class="stat-percent font-bold text-danger">
                        </div>
                        <small>全部回收订单</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5>总交易额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${selectCountPrice.price_amount}">23230</h1>
                        <div class="stat-percent font-bold text-navy">
                        </div>
                        <small>总交易额</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">月</span>
                        <h5>月订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${statisticsOrderRight.order_count_current_month}">0</h1>
                        <div class="stat-percent font-bold text-navy">0 <i class="fa fa-level-up"></i>
                        </div>
                        <small>月订单</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">昨日</span>
                        <h5>昨日订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${statisticsOrderRight.order_count_yesterday}">0</h1>
                        <div class="stat-percent font-bold text-navy">&lt;!&ndash;0 <i class="fa fa-level-up"></i>&ndash;&gt;
                        </div>
                        <small>昨日订单</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>今日订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${statisticsOrderRight.order_count_today}">0</h1>
                        <div class="stat-percent font-bold text-navy">&lt;!&ndash;0 <i class="fa fa-level-up"></i>&ndash;&gt;
                        </div>
                        <small>今日订单</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>-->
            <!--<div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>今日交易额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${selectCountPrice.price_today_amount}">0</h1>
                        <div class="stat-percent font-bold text-navy">&lt;!&ndash;0 <i class="fa fa-level-up"></i>&ndash;&gt;
                        </div>
                        <small>今日交易额</small>
                        <div>
                            <div class="stat-percent font-bold text-success">&nbsp;
                            </div>
                            <small>&nbsp;</small>
                        </div>
                    </div>
                </div>
            </div>-->

        </div>

        <div class="row ">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单统计图</h5>
                        <div class="pull-right">
                            <div class="btn-group hidden">
                                <button type="button" class="btn btn-xs btn-white active">天</button>
                                <button type="button" class="btn btn-xs btn-white">月</button>
                                <button type="button" class="btn btn-xs btn-white">年</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9" style="width: 100%">
                                <div class="flot-chart" style="float: left;width: 33%">
                                    <div class="flot-chart-content" id="flot-dashboard-yuan"></div>
                                </div>
                                <div class="flot-chart" style="float: left;width: 33%">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                                <div class="flot-chart" style="float: left;width: 33%">
                                    <div class="flot-chart-content" id="flot-dashboard-chart2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row ">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>门店排行榜</h5>
                        <div class="ibox-tools hidden">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                                <tr>
                                    <th>门店</th>
                                    <th>预约订单</th>
                                    <th>次卡</th>
                                    <th>充值次数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="item,index:${indexDataOfList}">
                                    <td>
                                        <th:bolck th:if="${index.index <= 2}"><i class="text-navy fa fa-level-up"></i></th:bolck>
                                        <span th:text="${item.dept_name}">badge-primary</span>
                                    </td>
                                    <td th:text="${item.server_order_count}"><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td class="text-navy" th:text="${item.server_order_count}"></td>
                                    <td class="text-navy" th:text="${item.card_recharge_data}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
         </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: highcharts-js" />

    <script th:inline="javascript">
        $(function (){
            var categories1 = [],categories2 = [];
            var orderData = [];
            var finishData = [];
            var priceData = [];
            var statisticsOrderGraph1 = [[${statisticsOrderGraph1}]];
            if(typeof statisticsOrderGraph1 == "string"){
                statisticsOrderGraph1 = eval(statisticsOrderGraph1);
            }
            for(var index in statisticsOrderGraph1){
                categories1.push(statisticsOrderGraph1[index].order_date);
                priceData.push(statisticsOrderGraph1[index].price);
            }

            var statisticsOrderGraph2 = [[${statisticsOrderGraph2}]];
            if(typeof statisticsOrderGraph2 == "string"){
                statisticsOrderGraph2 = eval(statisticsOrderGraph2);
            }
            for(var index in statisticsOrderGraph2){
                categories2.push(statisticsOrderGraph2[index].order_date);
                orderData.push(statisticsOrderGraph2[index].order_count);
            }


            var pieData = [[${pie}]];
            if(typeof pieData == "string"){
                pieData = eval(pieData);
            }
            var pieDatas_ = [];
            for(var index in pieData){
                var pieData_ = {};
                pieData_["name"]=pieData[index].recycle_type;
                pieData_["y"]=pieData[index].count_data;
                if(index == 0){
                    pieData_["sliced"]=true;
                    pieData_["selected"]=true;
                }
                pieDatas_.push(pieData_);
            }

            //饼图
            Highcharts.chart('flot-dashboard-yuan', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                exporting:{enabled:false},
                title: {
                        text: null
                },
                tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        colors: ["#00869F","#1AA034","#FDDA01","#90477F","#2C2255"],
                        dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                        },
                        showInLegend: true //显示图例
                    }
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: pieDatas_
                }]
            });

            //成交额
            Highcharts.chart('flot-dashboard-chart', {
                chart: {
                    type: 'line'
                },
                credits: { enabled:false},
                exporting:{enabled:false},
                title: {text: null},
                subtitle: {text: null},
                xAxis: {
                    categories: categories1
                },
                yAxis: {
                    title: {
                        text: '本月充值额'
                    }
                },
                legend:{enabled:false},//关闭图例
                plotOptions: {
                    line: {
                        dataLabels: {
                            // 开启数据标签
                            enabled: false
                        },
                        // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        enableMouseTracking: true
                    }
                },
                series: [{
                    name: '本月充值额',
                    data: priceData
                }]
            });

            Highcharts.chart('flot-dashboard-chart2', {
                chart: {
                    type: 'line'
                },
                credits: { enabled:false},
                exporting:{enabled:false},
                title: {text: null},
                subtitle: {text: null},
                xAxis: {
                    categories: categories2
                },
                yAxis: {
                    title: {
                        text: '本月预约订单数'
                    }
                },
                legend:{enabled:false},//关闭图例
                plotOptions: {
                    line: {
                        dataLabels: {
                            // 开启数据标签
                            enabled: false
                        },
                        // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        enableMouseTracking: true
                    }
                },
                series: [{
                    name: '本月预约订单数',
                    data: orderData
                }]
            });
        })
    </script>
</body>
</html>
